import * as React from 'react'
const Home = React.lazy(() => import('../pages/Home'))
const About = React.lazy(() => import('../pages/About'))
const Profile = React.lazy(() => import('../pages/Profile'))
const User = React.lazy(() => import('../pages/User'))
const Login = React.lazy(() => import('../pages/Login'))
const Detail = React.lazy(() => import('../pages/Detail'))

const routes = [
  {
    path: '/',
    element: (
      <React.Suspense fallback={<></>}>
        <Home />
      </React.Suspense>
    )
  },
  {
    path: '/about',
    element: (
      <React.Suspense fallback={<></>}>
        <About />
      </React.Suspense>
    ),
    children: [
      {
        path: '',
        element: <h2>企业历史</h2>
      },
      {
        path: 'culture',
        element: <h2>企业文化</h2>
      },
      {
        path: 'contact',
        element: <h2>联系我们</h2>
      }
    ]
  },
  {
    path: 'profile',
    element: (
      <React.Suspense fallback={<></>}>
        <Profile />
      </React.Suspense>
    )
  },
  {
    path: 'user',
    element: (
      <React.Suspense fallback={<></>}>
        <User />
      </React.Suspense>
    )
  },
  {
    path: 'login',
    element: (
      <React.Suspense fallback={<></>}>
        <Login />
      </React.Suspense>
    )
  },
  {
    path: 'detail/:id',
    element: (
      <React.Suspense fallback={<></>}>
        <Detail />
      </React.Suspense>
    )
  }
]

export default routes
